嘿~昨天的內容還行嗎?
「兔兔,昨天突然就接收到大量語法!」
齁,這個我就要說聲不好意思~
原本是應該先介紹基本觀念
,
但我們今天基本觀念要寫在 SFC 裡面練習,
所以阿,就先介紹一下 SFC 囉~
知道 SFC 之後,
我們就不用去考慮 Vue 掛載問題,
只要把注意力放在生命週期和變數之間的關係啦~!
然後畢竟我們這不是專門的 Vue 系列,
我還是著重在之後的相互配合
上哦。
那今天,就讓我們稍微來 Speed Run 一下 Vue 吧!
我們雖然要講基本架構,
但是會以 SFC 的結構當作基底。
從 SFC 結構來說,會有以下三塊:
<!-- html 結構 -->
<template>
</template>
<!-- js 邏輯 -->
<script>
</script>
<!-- css 樣式 -->
<style>
</style>
這結構基本與 html 架構無異,
只是分界更明顯,然後沒有 <head>
。
我們來稍微簡單解釋一下:
HTML 結構的放置處,結構中可直接
使用 Vue 變數或是與 Vue 中的事件綁定。
Vue 與 Javascript 撰寫的地方。撰寫的變數或方法可以在 template 中直接存取。
CSS 樣式撰寫的地方,跟一般 CSS 寫法並無差異,如果只有 <style></style>
會是全域的,記得上了 scoped
才不會造成全域汙染。
那除了 SFC 之外,<script>
中也是有結構的。
一般結構會是這樣:
<script>
export default {
name: "元件名稱",
props: [],
data() {
return {
// ...
}
},
methods: {
// ...
},
computed: {
// ...
},
components: {
// ...
}
}
</script>
我們這邊不介紹 composition API,只會介紹 options API 的部分。
其實他就是一個普通的 js 物件。
只是在物件之中所定義的屬性必須是特定的
,
這樣 Vue 才能看得懂。
其實你也能自定義區塊,
只是如果你沒有對它特別處理,
那基本上對 Vue 來說毫無意義。
來稍微解釋一下各屬性的用途:
元件名稱,這會決定你在使用元件時的標籤名稱
。
原意是屬性 (properties)
,也就是指 html 元素的屬性,前端框架之中都是用屬性來對元件內部傳遞資料
。
用於存放要用的變數,data() 中必須回傳物件 {}
,並將要使用的變數等資料放在物件之中。
撰寫函數的地方,在 methods 中的函數可以接收參數值
;當 data 中資料有變動時,methods 中的函數會重新觸發執行重新運算
。
也是撰寫函數的地方,只是這邊的用法比較特別,而且不像 methods 中的函數一般,computed 不可以接收參數
;當 data 中的變動的資料不是該函數所用到的時,該函數不會重新執行重新運算
,會直接返回上一次運算後暫存的結果
,相對 methods 較不耗效能。
如果覺得聽不懂這邊的敘述,文章看完之後有一個 methods 與 computed 觸發差異的範例可以去看看。
幫 Vue 加入元件的地方,將其他 SFC 引用
進來之後,要加入 components 中才可以在 template 上使用
。
除了基本結構之外,
最重要的,是生命週期。
嗯,我知道看起來很複雜,
我也看不懂 XDD
不過大致上從 Vue 2 到 Vue 3,
options API 的生命週期沒有 (什麼) 變化。
大致上可以用的生命週期有:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted
errorCaptured
renderTracked
renderTriggered
activated
deactivated
但會不會都用到就看個人。
因為所謂 options API 就是,
這些其實是選擇性
的使用!
所以我們可以直接像那些結構,
直接混著加在裡面,
假如我們要在元件掛載成功時顯示 log,
那該怎麼去做?
舉例:
<script>
export default {
name: "Box",
props: ["number","color"],
mounted() {
console.log("Box 元件已掛載!")
}
}
</script>
我們這樣就把生命週期的 mounted
加進去了,這麼一來在元件掛載完成之後就會顯示 「Box 元件已掛載!」。
可以很清楚的發現,
跟前面相比只剩下了 mounted,
其他用不到的都拿掉了,
這就是所謂的選擇性。
生命週期就要自己去看一下文件,
看看那些生命週期都是做些什麼用的,
該用在什麼時候。
前面那些,都不重要啦!
其實也不是不重要,
而是現在這些才是我喜歡的部分!
魔法指令
聽起來很魔法,但是真的很魔法。
(哩洗咧供啥...)
但在講解魔法指令之前,
我們必須先知道模板語法
。
因為這關乎到在 template 使用變數的方式。
舉例:
<template>
<li> {{ content }} </li>
</template>
<script>
export default {
data() {
return {
content: "項目1內容"
}
}
}
</script>
從變數名稱對照一下,
可以大概看出 li 渲染之後的內容就會是:
<li> 項目1內容 </li>
而這 {{ }}
就是模板語法,
在這裡面可以直接使用 data 中的變數,
也可以直接使用函數回傳的結果,
或是 js 的運算式。
靈活運用 Vue 的魔法指令,
可以讓開發變的超級輕鬆,
無論是流程控制、取值,
又或者是排版,都很有幫助。
v-model
vue 是有雙向綁定的,用 v-model 可以輕鬆的在表單元素上快速取值和賦值
;之前在 Day17 中談到使用前端框架的好處時,有說過資料互動上的方便處,而 v-model 正是那最黑魔法的指令,因為當你 input 元件的值改變時,變數內容也已改變,當你修改變數內容時,畫面上 input 元件的值也會隨之改變。
這是純 js 的做法:
<input type="text" id="input" oninput="textSync()" />
<div id="show"></div>
<script>
function textSync() {
const input = document.getElementById("input")
const show = document.getElementById("show")
show.innerText = input.value
}
</script>
使用 v-model 只需要這樣:
<template>
<input type="text" v-model="content" />
<div>{{ content }}</div>
</template>
<script>
export default {
data() {
return {
content: ''
}
}
}
</script>
這樣他就會直接把變數 content 與 input 元素的值做雙向綁定
,不像是純 js 還需要定義 id 名稱去抓取 DOM 元素然後再向將內容渲染到指定的元素上。
v-if
在 html 元素上做判斷式是從前想也想不到的事情,但透過前端框架這件事情可以輕鬆實現,尤其是 vue。
透過 v-if 可以使用變數內容或函數輸出的結果值來做判斷式
,true 則顯示元素,false 則不渲染到頁面上
。
<template>
<div v-if="content==='a'"> 是 a </div>
</template>
<script>
export default {
data() {
return {
content: 'a'
}
}
}
</script>
另還有 v-elseif 和 v-else,這邊就不介紹了。
v-show
在視覺上和 v-if 實現的效果差不多
,但根本上是不一樣的。 v-if 判斷式結果為 false 時是直接不渲染元素內容,而 v-show 則是渲染到頁面上但利用 CSS 的 display:none;
將元素隱藏。
<template>
<div v-show="content==='a'"> 是 a </div>
</template>
<script>
export default {
data() {
return {
content: 'a'
}
}
}
</script>
v-for
這個也很黑魔法啦! 既然有 if 當然要有 for 啊! 這可是寫程式的標配欸。 v-for 可以從變數或者函數回傳的陣列、物件之類的內容來使元素或元件重複
,這在做清單列表、圖庫等等重複性高的畫面時超級無敵實用!
單純數量的 v-for:
<template>
<div v-for="count in 30">數字 {{count}}</div>
</template>
這樣就會有 30 個 div,然後內容是從 1 列到 30 了!
如果是從變數的話:
<template>
<div v-for="dir in dirs">方向:{{dir}}</div>
</template>
<script>
export default {
data() {
return {
dirs: ["上","左","下","右"]
}
}
}
</script>
所以有些資料是從 api 取得,我們就可以利用生命週期 mounted 等等的組合來完成。
像是:
<template>
<div>
導航路徑:
<div v-for="path in paths">{{path}}</div>
</div>
</template>
<script>
export default {
data() {
return {
paths: []
}
},
mounted() {
// 假設這是 api 取得的資料
const p = []
for(let i=0;i<30;i++){
p.push(i)
}
// 在 template 之外的地方存取 data 中的變數或其他函數時,前面必須加上 `this`
// 將取得到的資料存回 data 中的變數
this.paths = p
}
}
</script>
另外兩個常見指令會更常用到,但跟前面使用起來的感覺不太相同。我們接著繼續看。
v-bind
用途在於把資料綁定在屬性上,也是元件傳遞的一把關鍵鑰匙。原本 html 元素上的屬性都是固定值,要使用 js 改變它的內容其實有點小麻煩。 但是有了 v-bind 之後再也不用煩惱,可以讓元素的屬性值隨變數內容改變
。
舉例:
<template>
<div v-bind:id="id"> # {{id}}</div>
</template>
<script>
export default {
data() {
return {
id: "test"
}
}
}
</script>
基本上 html 元素具有的屬性都能夠綁定
,也可以綁定自定義的屬性,前面說過的元件的 props 就可以讀取到這些屬性的值。
如果覺得 v-bind 前綴很長,也可以縮短
成:
<div v-bind:id="id"> # {{id}}</div>
<!-- 縮短 -->
<div :id="id"> # {{id}}</div>
v-on
綁定事件用,用法與 v-bind 相同,可以使事件發生時觸發綁定的函數或者執行一行 js 的陳述式。同時,這是元件資料傳遞的另一把鑰匙
。
執行一行陳述式,舉例:
<template>
<div>
{{ num }}
<div v-on:click="num=0">歸零</div>
</div>
</template>
<script>
export default {
data() {
return {
num: 100
}
}
}
</script>
呼叫函數的舉例:
<template>
<div>
{{ num }}
<div v-on:click="clear()">歸零</div>
</div>
</template>
<script>
export default {
data() {
return {
num: 100
}
},
methods: {
clear() {
this.num = 0
}
}
}
</script>
也是與 v-bind 相同,基本上預設有提供的事件都能夠綁定
。也可以綁定自訂事件,但這就與元件資料傳遞有關,之後會提到。
預設,v-on 也是可以縮短
語法的:
<div v-on:click="clear()">歸零</div>
<!-- 縮短 -->
<div @click="clear()">歸零</div>
會,很燒腦嗎?
基本上這些東西是熟能生巧,
這些東西大概用了幾遍就會熟悉了。
其實寫 Vue 的時候,
真的就是不斷使用上面這些內容而已,
只是用法就要因應你需要的功能去做調整。
那就大概這樣了!
如果 vue 還不熟的話盡量多看一兩次,
那下面也會提供我覺得不錯的資源~
先躺了! (Zz..Zz...)
關於兔兔們:
( # 兔兔小聲說 )
你們信教嗎?
「嘖嘖你這隻兔子,一定又要說什麼兔兔教了吼!!」
錯了,這你就有所不知了...
此時此刻,我是回籠教的。兔兔 :
因為我現在的主要任務
是睡覺。